<template>
  <div>
    <el-container>
      <el-header>
        <h2>
          <b>优惠券管理</b>
        </h2>
      </el-header>
      <el-main>
        <el-table
          :data="tData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column prop="name" label="优惠券名" width="339"></el-table-column>
          <el-table-column prop="expiryDate" label="有效期(天)" width="339"></el-table-column>
          <el-table-column prop="discount" label="折扣" width="339"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="primary" size="mini">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <div align="center">
          <el-button type="primary" @click="dialogFormVisibleAdd=true">增加</el-button>
          <!-- <el-button type="primary" @click="delAll">批量删除</el-button> -->
        </div>
      </el-main>
    </el-container>

    <el-dialog
      title="优惠券增加"
      :visible.sync="dialogFormVisibleAdd"
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form :model="form" ref="form" :rules="formrules">
        <el-form-item label="优惠券名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="有效期(天)" :label-width="formLabelWidth" prop="expiryDate">
          <el-input v-model.number="form.expiryDate"></el-input>
        </el-form-item>
        <el-form-item label="折扣" :label-width="formLabelWidth" prop="discount">
          <el-input v-model.number="form.discount">
            <template slot="prepend">0.</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose('form')">取 消</el-button>
        <el-button type="primary" @click="add('form')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="优惠券修改"
      :visible.sync="dialogFormVisibleUpdate"
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form :model="updateform" ref="updateform" :rules="formrules">
        <el-form-item label="优惠券名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="updateform.name"></el-input>
        </el-form-item>
        <el-form-item label="有效期(天)" :label-width="formLabelWidth" prop="expiryDate">
          <el-input v-model.number="updateform.expiryDate"></el-input>
        </el-form-item>
        <el-form-item label="折扣" :label-width="formLabelWidth" prop="discount">
          <el-input v-model.number="updateform.discount">
            <template slot="prepend">0.</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose('updateform')">取 消</el-button>
        <el-button type="primary" @click="update('updateform')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
import Qs from "qs";
export default {
  data() {
    var validateNum1 = (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error("不能为负数或0"));
      } else {
        callback();
      }
    };
    var validateNum2 = (rule, value, callback) => {
      if (value <= 0 || value >= 100) {
        callback(new Error("格式错误"));
      } else {
        callback();
      }
    };
    return {
      tData: [],
      updateform: {
        id: "",
        name: "",
        expiryDate: "",
        discount: "",
      },
      form: {
        name: "",
        expiryDate: "",
        discount: "",
      },
      formrules: {
        name: [{ required: true, message: "请输入优惠券名", trigger: "blur" }],
        expiryDate: [
          { required: true, message: "请输入有效期", trigger: "blur" },
          { type: "number", message: "数量必须为数字值" },
          { validator: validateNum1, trigger: "blur" },
        ],
        discount: [
          { required: true, message: "请输入折扣", trigger: "blur" },
          { type: "number", message: "数量必须为数字值" },
          { validator: validateNum2, trigger: "blur" },
        ],
      },
      multipleSelection: [],
      formLabelWidth: "120px",
      dialogFormVisibleAdd: false,
      dialogFormVisibleUpdate: false,
    };
  },
  created() {
    this.onSubmit();
  },
  methods: {
    onSubmit() {
      Axios.get("/tfss/admin/discount/list").then((r) => {
        if (r.data.code == 200) {
          this.tData = r.data.data;
        } else if (r.data.code == 403) {
          this.$message.error("没有权限");
        } else if (r.data.code == 703) {
          this.$message.error("未登录");
        } else if (r.data.code == 500) {
          this.$message.error("系统繁忙，请稍后再试");
        } else if (r.data.code == 704) {
          this.$message.error("登录失效，请重新登录");
        }
      });
    },
    onClose(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisibleAdd = false;
      this.dialogFormVisibleUpdate = false;
    },
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("确认增加?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.form.discount = "0." + this.form.discount;
              Axios.post("/tfss/admin/discount/add", this.form).then((r) => {
                if (r.data.code === 200) {
                  this.$message({
                    type: "success",
                    message: "增加成功!",
                  });
                  this.dialogFormVisibleAdd = false;
                  this.onSubmit();
                } else if (r.data.code == 403) {
                  this.$message.error("没有权限");
                } else if (r.data.code == 703) {
                  this.$message.error("未登录");
                } else if (r.data.code == 500) {
                  this.$message.error("系统繁忙，请稍后再试");
                } else if (r.data.code == 704) {
                  this.$message.error("登录失效，请重新登录");
                } else if (r.data.code == 705) {
                  this.$message.error("账号已存在");
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        } else {
          return false;
        }
      });
    },
    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("确认修改?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.updateform.discount = "0." + this.updateform.discount;
              Axios.post("/tfss/admin/discount/update", this.updateform).then(
                (r) => {
                  if (r.data.code === 200) {
                    this.$message({
                      type: "success",
                      message: "修改成功!",
                    });
                    this.dialogFormVisibleUpdate = false;
                    this.onSubmit();
                  } else if (r.data.code == 403) {
                    this.$message.error("没有权限");
                  } else if (r.data.code == 703) {
                    this.$message.error("未登录");
                  } else if (r.data.code == 500) {
                    this.$message.error("系统繁忙，请稍后再试");
                  } else if (r.data.code == 704) {
                    this.$message.error("登录失效，请重新登录");
                  } else if (r.data.code == 705) {
                    this.$message.error("账号已存在");
                  }
                }
              );
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        } else {
          return false;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(row) {
      this.dialogFormVisibleUpdate = true;
      this.updateform = JSON.parse(JSON.stringify(row));
      this.updateform.expiryDate = parseInt(this.updateform.expiryDate);
      this.updateform.discount = parseInt(
        this.updateform.discount.toString().substring(2)
      );
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  /* background-color: #b3c0d1; */
  color: #333;
  /* text-align: center; */
  line-height: 60px;
}
.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
}
</style>